<template>
        <div class="zxyA">
          <el-card>
            <div style="padding-top:10px;padding-bottom:10px;">
            <el-link :underline="false" @click="goToLogin()">←返回登录页面</el-link>
          </div>
          <div style="font-size: 24px; color: #000000">找回密码</div>
          <el-divider></el-divider>
          <div style="padding-top:10px;padding-bottom:10px;">
              <div style="padding-top:10px;padding-bottom:10px;">
                  <el-input v-model="inputEmail" placeholder="请输入绑定邮箱">
                        <template #append>
                            <el-button @click="sendC()">发送验证码</el-button>
                        </template>
                    </el-input>
              </div>
              <div style="padding-top:10px;padding-bottom:10px;">
                  <el-input v-model="inputCode" placeholder="请输入验证码"></el-input>
              </div>
              <div v-if="isHim">
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-input v-model="inputPA" placeholder="请输入新密码" show-password></el-input>
                </div>
                <div style="padding-top:10px;padding-bottom:10px;">
                    <el-input v-model="inputPB" placeholder="请再次输入新密码" show-password></el-input>
                </div>
                <div class="wellA">
                    <div style="padding-top:10px;padding-bottom:10px;">
                      <el-button @click="modifyP()">确认修改</el-button>
                  </div> 
              </div> 
              </div>
              <div v-else>
                <div class="wellA">
                  <div style="padding-top:10px;padding-bottom:10px;">
                    <el-button @click="codeTrue()">验证身份</el-button>
                </div> 
                </div> 
              </div>
              
              </div>
                 </el-card>
        </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import {Edit} from "@element-plus/icons";
import logo from "../assets/no_border.png";
import axios from "axios";
import qs from 'qs';
export default defineComponent({
  setup() {
    const state = reactive({
      logo,
      Edit,
      inputEmail:'',
      inputCode:'',
      inputPA:'',
      inputPB:'',
      id:'',
      isHim:false,
    });
    return {
      ...toRefs(state),
    };
  },
  methods: {
    goToLogin(){
      this.$router.push("/login");
    },
    sendC(){
        let dataA={
            email:this.inputEmail,
            authCode:'sendCode'
        }
        let data=qs.stringify(dataA)
        axios.post("findPasswordStep1/",data).then((res) => { 
          console.log(res.data);
          if (res.data.code==200){
              this.$message({ message: '发送验证码成功', type: 'success' });
          }
          else{
              this.$message.error(res.data.msg);
          }
        });
    },
    codeTrue(){
        let dataA={
            email:this.inputEmail,
            authCode:this.inputCode
        }
        let data=qs.stringify(dataA)
        axios.post("findPasswordStep1/",data).then((res) => { 
          console.log(res.data);
          if (res.data.code==200){
            this.$message({ message: '验证成功', type: 'success' });
              this.id=res.data.id
              this.isHim=true
          }
          else{
              this.$message.error(res.data.msg);
          }
        });
    },
    modifyP(){
        let dataA={
            userID:this.id,
            newpassword1:this.inputPA,
            newpassword2:this.inputPB
        }
        let data=qs.stringify(dataA)
        axios.post("findPasswordStep2/",data).then((res) => { 
        console.log(res.data);
        if (res.data.code==200){
            this.$message({ message: '修改密码成功', type: 'success' });
            this.$router.push("/login");
        }
        else{
            this.$message.error(res.data.msg);
        }
        });
    }
  },
});
</script>


<style scoped>
.zxyA {
  margin-top: 30px;
  width: 600px;
  position: absolute;
  left: calc(50% - 300px);
  text-align: left;
}

</style>